<template>
	<view>
		<view class="ls-div u-m-t-26">
			<image class="tw-lsbg" src="../../static/img/home/ls-i-i.png" mode=""></image>
			<view class="flex_only u-p-b-20 flex_sb ls-d-t">
				<view class="flex">
					<image class="headimg" :src="lsdetail.avatar" mode="aspectFill"></image>
					<view class="u-m-l-20  ">

						<view class="flex">
							<view class="font_14_333 font_weight">
								{{lsdetail.name}}
							</view>
							<view class="flex">
								<image class="u-m-l-8 h23" src="../../static/img/home/h23.png" mode="aspectFill"></image>
								<view class="font_10_333 u-m-l-8">
									{{lsdetail.province}}
								</view>
							</view>
							<view class="flex u-m-l-16 ">
								<image class="h24" src="../../static/img/home/h24.png" mode=""></image>
								<view class="pf-t">{{lsdetail.mark}}</view>
							</view>
						</view>

						<view class="u-m-t-14 font_10_666">
							执业证号：{{lsdetail.license_num}}
						</view>
					</view>

				</view>

			</view>
			<view class="u-m-t-12">
				<view class="ls-sss-item flex">
					<image class="ls-sss" src="../../static/img/home/ls-sss.png" mode=""></image>
					<view class="ls-te u-m-l-8">
						1v1深度沟通，剖析案情，提供专业解答
					</view>
				</view>
				<view class="ls-sss-item flex">
					<image class="ls-sss" src="../../static/img/home/ls-sss.png" mode=""></image>
					<view class="ls-te u-m-l-8">
						服务有保障，服务不满意可更换律师
					</view>
				</view>
				<view class="ls-sss-item flex">
					<image class="ls-sss" src="../../static/img/home/ls-sss.png" mode=""></image>
					<view class="ls-te u-m-l-8">
						平均3分钟内回复，问题解决率99%
					</view>
				</view>
			</view>
		</view>
		<view class="in-div in-div2 u-m-t-18">
			<view class="t-title">
				服务流程
			</view>
			<view class="u-m-t-16">
				<image class="fw-img u-m-t-32" src="../../static/img/home/c3-3.png" mode=""></image>
				<view class="u-m-t-24 font_12_999 flex">
					<view class="chbox  flex_cen flex" v-if="chboxSel" @click="chboxSel=false">
						<u-icon name="checkbox-mark" color="#fff" size="18"></u-icon>
					</view>
					<view class="chbox-no" v-if="!chboxSel" @click="chboxSel=true"></view>
					<view class="u-m-l-10">
						若律师3分钟未响应，平台将推荐在线金牌律师为您服务
					</view>

				</view>
			</view>
		</view>
		<view class="bottom-btn flex flex_cen u-m-t-20">
			<view class="flex x-btn flex_cen" @click="$u.throttle(nexttick, 1000)">
				<image class="szt-img" src="../../static/img/home/c4.png" mode=""></image>
				<view class="xiadan">
					立即下单
				</view>
				<view class="u-m-t-8">
					<span class="m-m">(</span>
					<span class="m-fh">￥</span>
					<span class="m-m">{{priceList.price}}</span>
					<span class="m-sj">/{{priceList.time_sku}}{{priceList.unit}}</span>
					<span class="m-m">)</span>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		name: "subOrder",
		data() {
			return {
				chboxSel: true,
				lsdetail:''
			};
		},
		props: {
			lid: {
				type: String,
				default: ''
			},
			priceList:{
				type: Object,
				default () {
					return {
						price: '',
						time_sku: '',
						unit: '',
						name: '',
						id:''
					};
				}
			},
		},
		created() {
			console.log(this.priceList,'thispriceListpriceListpriceList')
			this.getInfo()
		},
		methods: {
			//个人信息
			getInfo() {
				this.$api({
					url: '/lawyer/detail',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.lid
					},
				}).then(res => {
					if (res.code == 1) {
						this.lsdetail = res.data
					}
				})
			
			},
			nexttick(){
				this.$emit('nexttick')
				// uni.navigateTo({
				// 	url:"/pages/index/pushNeed?lawyer_id="+this.lid+"&serve_id="+this.priceList.id
				// })
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.chbox {
		width: 24rpx;
		height: 24rpx;
		background: #F81B1B;
		border-radius: 50%;
		text-align: center;
		// line-height: 24rpx;
	}

	.chbox-no {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 1px #999 solid;
	}

	.ls-div {
		position: relative;
		width: 686rpx;
		// height: 120rpx;
		background: linear-gradient(90deg, #FFF8EF 0%, #FFFBF5 55%, #FFF8EF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #F4CF9C;
		padding: 18rpx 24rpx;

		.lszy {
			font-size: 24rpx;
			color: #FF640D;
		}

		.ls-d-t {
			border-bottom: 1px #ECE4D9 dashed;
		}

		.ls-sss-item {
			margin-top: 10rpx;

			.ls-sss {
				width: 24rpx;
				height: 24rpx;
			}

			.ls-te {
				font-weight: bold;
				font-size: 20rpx;
				color: #B89D7B;
			}
		}

		.tw-lsbg {
			width: 134rpx;
			height: 136rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.headimg {
			height: 84rpx;
			width: 68rpx;
			border-radius: 8rpx;
		}

		.h23 {
			width: 24rpx;
			height: 20rpx;
		}

		.h24 {
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}

		.pf-t {
			font-size: 20rpx;
			color: #FD8643;
		}
	}

	.in-div {
		width: 686rpx;
		// height: 682rpx;
		background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 36rpx 40rpx;

		&2 {
			border-radius: 16rpx;
			padding: 24rpx;
		}

		.in-item {

			.in-text {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.input-div {
				width: 606rpx;
				// height: 80rpx;
				// background: #FFFFFF;
				// border-radius: 8rpx 8rpx 8rpx 8rpx;
				// border: 2rpx solid #DDDDDD;
				margin-top: 16rpx;
				// padding: 0 26rpx;
			}
		}

		.suo {
			width: 20rpx;
			height: 24rpx;
		}

		.t-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		.yewu-div {

			.yewu-item {
				background: #F8F7F7;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #D9D9D9;
				font-size: 24rpx;
				color: #9A9A9A;
				padding: 4rpx 8rpx;
				margin-top: 20rpx;
			}
		}

		.fusm {
			font-size: 28rpx;
			color: #666666;
			line-height: 44rpx;
		}

		.fw-img {
			width: 640rpx;
			height: 114rpx;
		}
	}

	.bottom-btn {
		margin-left: -32rpx;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		color: #ffffff;

		.x-btn {
			width: 686rpx;
			height: 92rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			position: relative;

			.szt-img {
				position: absolute;
				right: 66rpx;
				top: 14rpx;
				width: 72rpx;
				height: 64rpx;
			}
		}

		.xiadan {
			font-size: 36rpx;
		}

		.m-fh {
			font-weight: bold;
			font-size: 28rpx;

		}

		.m-m {
			font-weight: bold;
			font-size: 36rpx;

		}

		.m-sj {
			font-size: 28rpx;

		}
	}
</style>